<template>
  <div class="box">
    <h3>父组件 —— 我有一个sum值是:{{sum}}</h3>
    <p>
      回忆一些东西：
      <button @click="show1">点我提示按钮里的文字</button>
      <button @click="show2(6,$event)">点我提示按钮里的文字和参数</button>
    </p>
    <!-- 下面的第10行务必要看懂，自定义事件中的$event是触发事件时传递的参数 -->
    <Child1 @add-sum="sum += $event"/>
    <Child2 @click.native="show3"/>
  </div>
</template>

<script>
  import Child1 from './Child1'
  import Child2 from './Child2'

  export default {
    name: 'Index',
    components:{Child1,Child2},
    data() {
      return {
        sum:1
      }
    },
    methods: {
      show1(e){
        alert(e.target.innerText)
      },
      show2(number,e){
        alert(`${e.target.innerText}，${number}`)
      },
      show3(){
        alert('你点我了')
      }
    },
  }
</script>

<style lang="less" scoped>
	.box{
		background-color:rgb(165, 164, 164);
		padding: 20px;
    border-radius: 10px;
		button{
			margin-right: 5px;
		}
	}
</style>